<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="title w-full h-[72px] p-[20px_24px] flex justify-between items-center box-border">资源信息</div>
      <div class="top-box w-[calc(100%_-_48px)] h-[72px] m-[0px_24px] box-border p-[20px] bg-[#F7F9FC]" v-if="dataItem.id">
        <a-row>
          <a-col :span="8">
            <a-form-item label="资源名称">{{ dataItem.name }}</a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="资源所属组织">
              <span>{{ Orgs }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="资源编号">{{ dataItem.code }}</a-form-item>
          </a-col>
        </a-row>
      </div>
      <div class="title w-full h-[72px] p-[20px_24px] flex justify-between items-center box-border">数据关系视图</div>
      <div class="relation-view-box w-[calc(100%_-_48px)] h-[calc(100%_-_216px_-_64px)] m-[0_24px] overflow-hidden box-border" ref="RefBox">
        <EchatrBox 
          :height="`${RefBox?.clientHeight || 0}px`" 
          :width="`${RefBox?.clientWidth || 0}px`" 
          :data="dataRelations"
          v-if="RefBox && dataRelations.length > 0"
        />
      </div>
      <div class="footer w-full h-[64px] overflow-hidden box-border p-[20px] flex justify-between items-center">
        <span></span>
        <span>
          <a-button type="primary" @click="router.push({ name: 'resource' })">关闭</a-button>
        </span>
      </div>
    </template>
  </PageMain>
  <div class="version-list-box">
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import * as Api from '@/api/assetManagement/assetManagement';
import * as T from '@/api/assetManagement/assetManagement_type';
import PageMain from '@/components/PageBox.vue'
import { Message } from '@arco-design/web-vue';

import EchatrBox from '@/components/echarts_allocation/EachartsView.vue'

const router = useRouter();
const route = useRoute();
const dataItem = ref<T.TResourceItem>(T.DefaultTResourceItem())
const dataId = ref<string|number>(route.params.id as any)
const dataRelations = ref<T.TResourceRelationItem[]>([])
const RefBox = ref<HTMLDivElement>()
const Orgs = computed(() => {
  const names: any[] = dataItem.value.owner_org_code || [];
  const namesStr: string[] = []
  names.forEach((org) => {
    namesStr.push(org.name)
  })
  console.log(`[ dataItem ]=>`,namesStr)
  const res = namesStr.join('、')
  return res
})

function getData() {
  Api.GetResourceInfo(dataId.value).then((rs) => {
    const { code, data } = rs;
    if (code === 200 && data) {
      dataItem.value = data;
      getRelation()
      return
    }
    Message.error(`获取资源信息失败[${rs.errMsg}]`);
  });
}

function getRelation() {
  Api.GetRelation(dataId.value).then((rs) => {
    const { code, data } = rs;
    if (code === 200 && data) {
      dataRelations.value = data;
      console.log(`[ relation ]=>`, dataRelations.value)
      return
    }
    Message.error(`获取资源关系失败[${rs.errMsg}]`);
  });
}

onMounted(() => {
  getData()
});
</script>

<style lang="less" scoped>
.top-box{
  .arco-row {
    height: 50%; width: 100%;
    .arco-col{
      .arco-form-item{
        margin-bottom: 0;
      }
    }
  }
}
.relation-view-box{
  border: 1px solid #D3DBEB;
}
// 
.title{
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: bold;
  color: #394D73;
}
.footer{
  box-shadow: 0px 0px 6px 0px rgba(57, 77, 115, 0.1);
}
</style>
